<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="./zui/css/zui.css" rel="stylesheet">

<title>数据表格</title>
<script src="./zui/lib/jquery/jquery1.11.0.js"></script>
<script src="./zui/js/zui.js"></script>

<link href="./zui/lib/datatable/zui.datatable.css" rel="stylesheet">
<script src="./zui/lib/datatable/zui.datatable.js"></script>
<link href="./zui/lib/datagrid/zui.datagrid.min.css" rel="stylesheet">
<script src="./zui/lib/datagrid/zui.datagrid.min.js"></script>
  <style>
    .container{
        width:1140px;max-width: 1140px
    }
    .example{
        width:980px;max-width: 980px
    }
</style>
</head>
 <body> 
 

 <div class="row">
 <div class="col-lg-2 col-md-2>"> 
 <h1>数据表格  </h1>
 </div>

  <div class="col-lg-10 col-md-10>">
  <div class="example">
  表格示例
 <!-- 表格代码 -->
  <table class="table datatable">
    <thead>
      <tr>
        <!-- 以下两列左侧固定 -->
        <th>#</th>
        <th>时间</th>

        <!-- 以下三列中间可滚动 -->
        <th>事件类型</th> 
        <th>描述</th>
        <th>相关人物</th>

        <!-- 以下列右侧固定 -->
        <th>评分</th>

      </tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>2018-1-1</td><td>上网</td><td>禁止再次发生</td><td>李咏</td><td>80</td></tr>
      <tr><td>2</td><td>2018-10-1</td><td>制作ppt</td><td>没有完成</td><td>李刚</td><td>50</td></tr>
      <tr><td>3</td><td>2018-10-5</td><td>制作广告</td><td>没有完成</td><td>李小刚</td><td>30</td></tr>
    </tbody>
  </table>

  </div>
  </div>


</div>

</body>
<script >
/* 初始化数据表格 */
//alert($('table.datatable'));
//$('table.datatable').addClass('table-bordered');
$('table.datatable').datatable({
    checkable: true,
    sortable: true,
    checkedClass: "checked",
    minFixedLeftWidth: 300
    // 更多参数...
});
// $('table.datatable').datatable({
//     sort: function(event) {
//         console.log(event);
//         // console.log("表格已重新排序！");
//         // 处理 sort 事件
//         // ...
//     }
// });
</script>